<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 获取元素
    var i = document.querySelector('input')
    var d = document.querySelector('div')
    this.data = {name: '123'}
    
    // Object.defineProperty：定义行属性或者修改原来的属性
    Object.defineProperty(this.data, 'name', {
      get() {
        // 返回获取input值
        return v.value
      },
      set(newValue) {
        // 赋值
        d.innerHTML = newValue
        i.value = newValue
      }
    })
    // 监听Input
    i.addEventListener('input', e => {
      // 把自身元素赋值给自己建立的this.data
      this.data.name = e.target.value
    })
  </script>
</body>
</html>